<template>
	<view class="page">
		<view class="page-nav">
			<u-navbar leftText="会员中心" leftIconSize="0" leftIconColor="#FFC9AB" :fixed="true" :placeholder="true"
				bgColor="#00152E" :autoBack="false">
			</u-navbar>
		</view>

		<view class="page-top">
			<view class="panel-user-info">
				<view class="bg-box">
					<image src="@/static/vip/vip-index-bg.png" mode=""></image>
				</view>
				<view class="info-box">
					<view class="info-top flex-between">
						<view class="info-top-left">
							乐辰生活 <text class="vip">VIP</text>
						</view>
						<view class="info-top-right flex" @click="toRoute('/vip-payment-record')">
							<text class="label">开通记录</text>
							<u-icon label="" size="16" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="info-bottom flex">
						<view class="info-avatar">
							<image :src="mix_user_avatar" mode=""></image>
						</view>
						<view class="info-name ">
							<view class="name">
								LU蒙恩
							</view>
							<view class="desc">
								2024-06-16到期 · VIP月卡
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="panel-vip-info">
				<view class="title-box flex-between">
					<view class="curr-title">
						当前会员权益
					</view>
					<view class="curr-level">
						VIP1
					</view>
				</view>
				<view class="progress-title flex-between">
					<view class="number-box">
						800/1000
					</view>
					<view class="total-box">
						消费积分达到1000积分，升级为VIP2
					</view>
				</view>
				<view class="progress-line">
					<view class="progress-active">

					</view>
				</view>
				<view class="tip">
					温馨提示：上一年新增积分计算时段为上一年的1月1日至12月31日止，
					本年度新增的积分数为本年度新增的积分只要达到标准，达到时即可转为
					相应的会员等级
				</view>
			</view>

			<view class="panel-quanyi">
				<view class="title-zh">
					会员权益
				</view>
				<view class="title-en">
					VIP Equity
				</view>
				<view class="vip-box">
					<view class="vip-desc">
						<view class="desc">
							会员可享受会员特惠商品购买服务。
						</view>
						<view class="desc">
							会员下单时满足前置条件可享受满减优惠:
						</view>
					</view>
					<view class="vip-table-row vip-table-title flex">
						<view class="vip-level">
							等级
						</view>
						<view class="vip-tiaojian">
							满足条件
						</view>
						<view class="vip-quanyi">
							会员满减
						</view>
					</view>
					<view class="vip-table-row flex" v-for="(item,index) in vipList">
						<view class="vip-level">
							{{item.title}}
						</view>
						<view class="vip-tiaojian">
							<!-- {{item.title}} -->
							上一年新增的积分数达大于等于1500；
							本年度新增的积分数达到大于等于1500。
						</view>
						<view class="vip-quanyi">
							{{item.rule}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page-bottom">
			<view class="pack-box">
				<view class="package-title">
					VIP会员套餐
				</view>
				<scroll-view scroll-x="true" class="scroll-wrap">
					<view class="cus-scroll-box">
						<view class="scroll-item" v-for="(item,index) in package_list" :class="{active:vip_select.id == item.id}"
							@click="toggle_vip(item)">
							<view class="time">
								1个月
							</view>
							<view class="price">
								<text class="huobi">￥</text>
								<text class="value">30</text>
							</view>
							<view class="price-line">
								原价 ¥68
							</view>
							<view class="price-day">
								￥1.00/天
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="pay-box">
				<view class="btn flex-center" @click="show_pop = true">
					确认协议并以20元续费
				</view>
				<view class="tip">
					开通前请确认协议并开通
				</view>
			</view>
			<w_bottom_safe height="120" />
		</view>

		<view class="vip-pay-pay">
			<u-popup ref="vip_pay_pop" bgColor="#ffffff" :show="show_pop" mode="bottom" :closeOnClickOverlay="true" round="30"
				@close="handleClose" @open="handleOpen">
				<view class="info-modal-wrap">
					<view class="info-modal-inner">
						<view class="modal-head ">
							<view class="title-box">
								开通会员
							</view>
						</view>
						<view class="modal-ctx">
							<view class="vip-info">
								<view class="bg-box">
									<image src="@/static/vip/vip-index-bg.png" mode=""></image>
								</view>
								<view class="info-box">
									<view class="vip-type flex-between">
										<view class="info-top-left">
											乐辰生活 <text class="vip">VIP</text>
										</view>
										<view class="info-top-right fit-text">
											VIP
										</view>
									</view>
									<view class="vip-price flex-between">
										<view class="label">
											VIP月卡
										</view>
										<view class="value">
											￥30.00
										</view>
									</view>
								</view>
							</view>
							<view class="price-info">
								<view class="main-title">
									价格明细
								</view>
								<view class="mingxi-group">
									<view class="mingxi-item flex-between">
										<view class="label">
											会员价格
										</view>
										<view class="value">
											￥30
										</view>
									</view>
									<view class="mingxi-item flex-between">
										<view class="label">
											积分抵扣 <text class="label-tip">请选择抵扣金额</text>
										</view>
										<view class="value">
											<u-icon label="" size="16" name="arrow-right"></u-icon>
										</view>
									</view>
								</view>
								<view class="total-box flex-between">
									<view class="label">
										合计应付
									</view>
									<view class="value">
										￥205.00
									</view>
								</view>
							</view>

							<view class="pay-info flex-between">
								<view class="label">
									支付方式
								</view>
								<view class="value flex">
									<image src="@/static/payment/type-weixin.png" mode=""></image>
									<text>微信支付</text>
								</view>
							</view>
							
							
							<view class="pay-tip">
								开通前请确认《会员服务协议》
							</view>
						</view>
						<view class="modal-foot">
							<view class="footer-wrap ">
								<view class="btns ">
									<view class="btn flex-center" @click="doCancel()">
										确认协议并以30元续费
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>

		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				vipList: [],
				current_swiper_index: 0,
				my_info: {
					cost_price: 0,
				},
				nextRule: {},
				//
				//
				//会员等级信息
				vip_info_level: {
					title: '',
					jianjie: '',
					content: '',
				},
				//会员特权信息
				vip_info_tequan: {
					title: '',
					jianjie: '',
					content: '',
				},
				//最高会员级别id
				max_level_id: '',

				//
				richStyle: {
					// 字符串的形式
					p: 'color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;text-align:justify;',
					span: 'color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;',
					img: 'vertical-align: bottom;'
				},


				package_list: [{
						id: 1,
					},
					{
						id: 11,
					},
					{
						id: 111,
					},
					{
						id: 1111,
					},
					{
						id: 11111,
					},
				],
				vip_select: {
					id: 1
				},
				show_pop: false,
			}
		},
		computed: {

		},

		onLoad() {
			this.setView();
		},
		methods: {
			setView() {
				this.query_user();
				this.query_vip_content();
			},

			query_user() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_userInfo',
					},
				}).then(res => {
					let data = res.data;
					this.my_info = data;
					this.nextRule = data.nextRule || {};
					let user_current_level_id = data.level
					let user_current_cost = data.costConsume || 0; //累计消费
					// let user_current_cost = data.costJifen || 0;//累计积分
					this.vipList = data.levelRules;
					this.vipList.forEach((v, index) => {
						v.price = parseFloat(v.price);
						v.percent = user_current_cost / v.price * 100 + '%';

						let next_item = this.vipList[index + 1]
						if (next_item) {
							v.next_title = next_item.title
							v.next_total = parseFloat(next_item.price) || 0
						}
					});

					let idList = this.vipList.map(v => v.id)
					this.max_level_id = Math.max(...idList)
					this.current_swiper_index = this.vipList.findIndex(v => v.id == user_current_level_id);

					this.$log('vipList', this.vipList)
					console.log('user_current_level_id', user_current_level_id)
					console.log('current_swiper_index', this.current_swiper_index)
				})
			},

			toggle_vip(item) {
				this.vip_select = item;
			},


			handleClose() {
				this.show_pop = false;
			},
			handleOpen() {},
			doClose() {
				this.show_pop = false;
			},
			doCouponPick(item) {
				this.$log('选择优惠券', item)
				if (this.real_payment_money < item.jian) {
					return;
				}
				this.coupon_select = item;
				this.$emit('confirm', this.coupon_select)
				this.show_pop = false;
			},
			doCancel() {
				this.coupon_select = {};
				this.$emit('confirm', {})
				this.show_pop = false;
			},
			doConfirm() {
				if (!this.coupon_select.id) {
					this.$alert('请选择优惠券')
					return
				}
				this.$emit('confirm', this.coupon_select)
				this.show_pop = false;
			},




			query_vip_content() {
				//会员等级说明
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'news_detail',
						id: 96, //this.id,
					},
				}).then(res => {
					if (res.code == 200) {
						this.vip_info_level = res.data.info;
					}
				})

				//会员特权说明
				// this.$api({
				// 	url: '/service.php',
				// 	method: 'get',
				// 	data: {
				// 		action: 'news_detail',
				// 		id: 96, //this.id,
				// 	},
				// }).then(res => {
				// 	if (res.code == 200) {
				// 		this.vip_info_tequan = res.data.info;
				// 	}
				// })
			},

			//  路线
			changeSwiper(e) {
				console.log('标记点切换 change', e)
				let index = e.detail.current
			},

			// buyVip() {
			// 	console.log(this.list[this.current].id, '等级id')
			// 	this.$api({
			// 		level_id: this.list[this.current].id
			// 	}, 'money_buyLevel').then(res_pay => {
			// 		if (res_pay.code != 1) {
			// 			this.msg('支付失败');
			// 			return false;
			// 		}
			// 		this.$api(res_pay.data).then(result => {
			// 			if (result.errMsg == 'requestPayment:fail cancel' || result.errMsg == 'requestPayment:fail') {
			// 				//用户取消支付
			// 				this.msg('取消支付');
			// 				return false;
			// 			} else {
			// 				this.msg('支付成功');
			// 			}
			// 		})
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	// 设置标题左对齐
	.page-nav ::v-deep .u-navbar__content__left {
		// display: none;
	}

	.page-nav ::v-deep .u-navbar__content__title {
		flex: 1;
		padding-left: 32rpx;
		text-align: left;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFC9AB;
	}

	.page {
		.page-ctx {}
	}

	.page-top {
		background: #00152E;
		padding: 32rpx;
	}

	.page-bottom {
		background: #ffffff;
	}

	.panel-user-info {
		position: relative;

		.bg-box {
			width: 100%;
			height: 232rpx;
			background: #FFE9C3;
			box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(255, 233, 195, 0.5);
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			image {
				width: 100%;
				height: 232rpx;
			}
		}

		.info-box {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			padding: 32rpx 24rpx;

			.info-top {
				.info-top-left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #D68D65;

					.vip {
						margin-left: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 36rpx;
						color: #D68D65;
					}
				}

				.info-top-right {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #713005;
				}
			}

			.info-bottom {
				margin-top: 32rpx;

				.info-avatar {
					width: 84rpx;
					height: 84rpx;
					border: 4rpx solid #FFFFFF;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 76rpx;
						height: 76rpx;
					}
				}

				.info-name {
					flex: 1;
					overflow: hidden;
					margin-left: 20rpx;

					.name {
						font-family: PingFangSC-Semibold, PingFangSC-Semibold;
						font-weight: normal;
						font-size: 28rpx;
						color: #713005;
					}

					.desc {
						margin-top: 12rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #B18158;
					}

				}
			}
		}
	}



	.panel-vip-info {
		margin-top: 40rpx;
		padding: 24rpx;
		width: 100%;
		min-height: 304rpx;
		background: #FFE9C3;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.title-box {
			border-bottom: 2rpx solid #FDC894;
			padding-bottom: 24rpx;

			.curr-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #713005;
			}

			.curr-level {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #713005;
			}
		}

		.progress-title {
			margin-top: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #713005;

		}

		.progress-line {
			margin-top: 10rpx;
			width: 100%;
			height: 8rpx;
			background: #E5D2AF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.progress-active {
				width: 50%;
				height: 8rpx;
				background: #D68D65;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}

		.tip {
			margin-top: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #D68D65;
			line-height: 28rpx;
		}

	}


	.panel-quanyi {
		margin-top: 24rpx;
		padding: 32rpx 24rpx;
		// min-height: 722rpx;
		background: #00152E;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #707070;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;

		.title-zh {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 40rpx;
			color: #FDF3DF;
		}

		.title-en {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 40rpx;
			color: rgba(255, 233, 195, 0.2);
		}


		.vip-box {
			margin-top: 24rpx;
			border: 1rpx solid #707070;
			border-radius: 8rpx 8rpx 0rpx 0rpx;

			.vip-desc {
				padding: 24rpx;
			}

			.vip-table-row {
				border-top: 1rpx solid #707070;

				view {
					padding: 10rpx 14rpx;
				}

				.vip-level {
					flex: 1;
				}

				.vip-tiaojian {
					flex: 3;
				}

				.vip-quanyi {
					flex: 2;
				}
			}
		}
	}


	.pack-box {
		.package-title {
			padding: 40rpx 32rpx;
		}

		.scroll-wrap {
			.cus-scroll-box {
				white-space: nowrap;

				.scroll-item {
					margin: 0 8rpx;
					padding: 40rpx 0;
					text-align: center;
					display: inline-block;
					width: 192rpx;
					min-height: 300rpx;
					background: #FFFFFF;
					border-radius: 32rpx 12rpx 32rpx 12rpx;
					border: 2rpx solid #EBEAEA;

					&.active {
						background: #FFE9C3;
						box-shadow: 0rpx 0rpx 14rpx 2rpx rgba(0, 0, 0, 0.04);
						border-radius: 32rpx 12rpx 32rpx 12rpx;
						border: 2rpx solid #FCB878;
					}


					.time {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #2F364B;
					}

					.price {
						margin-top: 16rpx;

						.huobi {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #2F364B;
						}

						.value {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 56rpx;
							color: #2F364B;
						}
					}

					.price-line {
						text-decoration: line-through;
						margin-top: 16rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #2F364B;
					}

					.price-day {
						margin-top: 10rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #2F364B;
					}
				}
			}
		}
	}


	.pay-box {
		margin-top: 96rpx;

		.btn {
			margin: 0 auto;
			width: 584rpx;
			height: 88rpx;
			background: linear-gradient(177deg, #FFE9C3 0%, #FDC894 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
		}

		.tip {
			margin-top: 26rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #949494;
		}
	}











	// 支付vip


	.vip-pay-pay {
		position: relative;
		z-index: 1000;
	}


	.info-modal-wrap {
		width: 100%;
		position: relative;
		text-align: left;
		padding-bottom: 0;

		.info-modal-inner {
			border-radius: 16rpx;
			overflow: hidden;
			width: 100%;
			padding: 0 0;
			padding-bottom: 0;
			min-height: 400rpx;
			background: #FFFFFF;
		}
	}



	.modal-head {
		// border: 1rpx solid #DDDDDD;
		padding-right: 0;

		.title-box {
			padding: 20rpx 40rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

	}


	.modal-ctx {
		width: 100%;
		background: #F5F7F9;
		padding: 24rpx 32rpx;
		min-height: 200rpx;
		padding-bottom: 30rpx;

		.vip-info {
			position: relative;

			.bg-box {
				width: 100%;
				height: 184rpx;

				image {
					width: 100%;
					height: 184rpx;
				}
			}

			.info-box {
				padding: 32rpx 24rpx;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

				.vip-type {
					.info-top-left {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #D68D65;
					}

					.info-top-right {
						min-width: 68rpx;
						height: 24rpx;
						background: #164782;
						border-radius: 0rpx 200rpx 200rpx 200rpx;
						font-family: PingFangSC-Medium, PingFangSC-Medium;
						font-weight: normal;
						font-size: 22rpx;
						color: #FFE6BA;
					}
				}

				.vip-price {
					margin-top: 32rpx;

					.label {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}

					.value {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #713005;
					}
				}
			}

		}


		.price-info {
			padding: 32rpx 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.main-title {
				margin-bottom: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.mingxi-group {
				.mingxi-item {
					margin-bottom: 20rpx;

					.label {
						font-family: PingFang SC, PingFang SC;
						// font-weight: bold;
						font-size: 24rpx;
						color: #222222;

						.label-tip {
							margin-left: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #B3B9C9;
						}
					}

					.value {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #222222;
					}
				}
			}

			.total-box {
				border-top: 2rpx solid #F2F5FB;
				padding-top: 32rpx;

				.label {
					font-family: PingFang SC, PingFang SC;
					// font-weight: 800;
					font-size: 28rpx;
					color: #222222;
				}

				.value {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;
				}
			}


		}
		
		.pay-info {
			margin-top: 20rpx;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		
			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
		
			.value {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
		
				image {
					margin-right: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		
		.pay-tip {
			text-align: center;
			margin-top: 80rpx;
			margin-bottom: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #9695A3;
		}

	}

	.footer-wrap {
		padding: 20rpx;

		.safe-fixed-bottom {
			position: relative;
		}

		.btns {
			.btn {
				flex: 1;
				width: 100%;
				height: 80rpx;
				background: #FFE9C3;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #713005;
			}
		}
	}
</style>